<template>
  <button @click="getData">click</button>
  <div id="container"></div>
</template>

<script>
import { Graph } from '@antv/x6'
import { data } from '@/views/test'
import { onMounted, ref } from 'vue'

export default {
  name: 'test',
  setup () {
    const graph = ref(null)
    const init = () => {
      graph.value = new Graph({
        panning: {
          enabled: true,
          modifiers: 'ctrl'
        },
        container: document.getElementById('container'),
        width: '100%',
        height: 400,
        background: {
          color: '#fffbe6' // 设置画布背景颜色
        }
      })
      graph.value.fromJSON(data)
      // graph.zoom(-0.5)
      graph.value.translate(80, 40)
    }
    const getData = () => {
      console.log(graph.value.toJSON())
    }
    onMounted(() => {
      init()
    })
    return {
      getData
    }
  }
}
</script>

<style scoped>

</style>
